<script>
export default {
  name: 'GColumn',
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {}
  },
  render() {
    const { item: col } = this
    // console.log(this.$scopedSlots, '列组件内部')
    let scopedSlots
    if (col.formatter) {
      // v-html
      scopedSlots = {
        default: (prop) => {
          let htmlStr = col.formatter(prop)
          return <div class="custom-html-box" domPropsInnerHTML={htmlStr} />
        },
      }
    }

    // 有插槽需要插入
    let slots = this.$scopedSlots[col.prop]
    if (slots) {
      scopedSlots = {
        default: (rowProp) => slots?.(rowProp),
      }
    }

    return (
      <el-table-column
        prop={col.prop}
        label={col.label}
        width={col.width}
        align={col.align}
        scopedSlots={scopedSlots} //对外暴露的插槽
      >
        {col?.children?.length > 0 &&
          col.children.map((cols) => {
            return <GColumn item={cols} />
          })}
      </el-table-column>
    )
    // 方式2
    return this.renderSingleColumn(col)
  },
  methods: {
    // 渲染单列
    renderSingleColumn(col) {
      // 发现了多列,调用多列渲染的方法（遍历)
      return (
        <el-table-column prop={col.prop} label={col.label} width={col.width}>
          {col?.children?.length > 0 &&
            col.children.map((cols) => this.renderSingleColumn(cols))}
        </el-table-column>
      )
    },
  },
}
</script>
